<style lang="less">
    @import 'login.less';
</style>

<template>
    <div class="login" v-if="isReload">
        <div class="header-box">
            <div class="header">
                <img :src="maxLogo" alt="" class="fl">
                <div class="fr header-title">
                    <i class="phone"></i>
                    <span class="txt">客服电话：</span>
                    <span>400-652-7606</span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="login-con">
                <Card :title="sysName" :bordered="false">
                    <div class="form-con">
                        <Form :model="form" :rules="rules" @keydown.enter.native="handleSubmit" ref="loginForm">
                            <FormItem prop="username">
                                <Input placeholder="请输入用户名" prefix="ios-person" size="large" v-model="form.username"/>
                            </FormItem>
                            <FormItem prop="password">
                                <Input placeholder="请输入密码" prefix="md-lock" size="large" type="afspassword" password
                                       v-model="form.password"/>
                            </FormItem>
                            <FormItem prop="code" class="captcha-item">
                                <Input placeholder="请输入计算结果" size="large" v-model="form.code">
                                    <span slot="append">
                                    <img :src="code.src"
                                        @click="refreshCode"
                                        class="login-code-img"/>
                                    </span>
                                </Input>
                            </FormItem>
                            <FormItem>
                                <Button @click="handleSubmit" long size="default" :loading="loading" type="primary" style="height: 40px;">
                                    <span v-if="!loading" style="font-size: 18px;">登录</span>
                                    <span v-else style="font-size:18px;">登录中...</span>
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </Card>
            </div>
        </div>
        <div class="footer-box">
            <div class="footer">
                <span class="copyright">©2020-2025 天津长城滨银汽车金融有限公司</span>
                <ul class="fr footer-con">
                    <li class="fl login-social">
                        <div class=" login-phone"></div>
                        <div class="login-qr-box">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title">扫码下载APP</div>
                            </div>
                        </div>
                    </li>
                    <li class="fl login-social">
                        <div class=" login-wx"></div>
                        <div class="login-qr-box">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title">扫码加微信</div>
                            </div>
                        </div>
                    </li>
                    <li class="fl login-social" ref="loginQq">
                        <div class=" login-qq"></div>
                        <div class="login-qr-box" :class="qrBoxCls">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title" style="padding-top: 0;">
                                    <span style="font-size:12px"> 客服QQ: </span>
                                   <br/> <span style="font-size:14px">1001001000</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from '@/libs/request/axios'
    import {mapActions} from 'vuex'
    import util from "@/libs/util.js";
    import config from '@/config/index'
    import maxLogo from '@/assets/images/logo1.png'
    export default {
        name: 'LoginForm',
        props: {
            usernameRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ]
                }
            },
            passwordRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                }
            }
            ,
            codeRules: {
                type: Array,
                default: () => {
                    return [
                        {required: true, message: '验证码不能为空', trigger: 'blur',}
                    ]
                }
            }
        },
        data() {
            return {
                qrBoxCls: '',
                maxLogo,
                isReload: false,
                form: {
                    username: '',
                    password: '',
                    code: '',
                    captchakey: ''
                },
                code: {
                    src: '',
                    value: '',
                    len: 6,
                    type: 'image'
                },
                rsapub: '',
                loading: false
            }
        },
        computed: {
            rules() {
                return {
                    username: this.usernameRules,
                    password: this.passwordRules,
                    code: this.codeRules
                }
            },
            sysName(){
                return '欢迎登录-'+config.getTitle()
            }
        },
        methods: {
            ...mapActions([
                'LoginByUsername',
                'GetUserInfo',
                'updatePubKey',
                'updateTenantId'
            ]),
            refreshCode() {
                this.form.code = '';
                axios.request({
                    url: 'captcha',
                    method: 'get'
                }).then(response => {
                    if (response.code == '0000') {
                        this.code.src = response.data.data;
                        this.form.captchakey = response.data.key
                    } else {
                        console.log('获取验证码失败')
                    }
                })
                    .catch(error => {
                        console.log(error)
                    })
            },
            loadRsaPub() {
                axios.request({
                    url: 'pubkey',
                    method: 'get'
                }).then(response => {
                    if (response.code == '0000') {
                        this.updatePubKey(response.data.pubkey);
                        this.rsapub = response.data.pubkey;
                    } else {
                        console.log('获取RSA_PUB失败')
                    }
                })
                    .catch(error => {
                        console.log(error)
                    })
            },
            handleSubmit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let encrypt = new JSEncrypt();
                        encrypt.setPublicKey(this.rsapub);
                        let reqObj = {
                            username: this.form.username,
                            password: encrypt.encrypt(this.form.password),
                            code: this.form.code,
                            captchaKey: this.form.captchakey
                        };
                        this.LoginByUsername(reqObj).then(res => {
                            this.GetUserInfo().then(res => {
                                // 加载菜单
                                util.initSystem(this);
                                this.$router.push({
                                    name: "home_index"
                                });
                                setTimeout(() => {
                                    this.loading = false;
                                }, 2000)
                            }).catch(err => {
                                this.refreshCode();
                                this.loading = false;
                                console.error(err);
                            })
                        }).catch(err => {
                            this.refreshCode();
                            this.loading = false;
                            console.error(err);
                        })
                    }
                })
            },
            calcPopWidth(){
                let left = document.body.clientWidth - this.$refs.loginQq.getBoundingClientRect().right

                console.log(document.body.clientWidth,'====',this.$refs.loginQq.getBoundingClientRect().right)
                // this.$nextTick(() => {
                //     console.log(this.$refs.loginQq.getBoundingClientRect(),'-------')
                // })
                if(left < 40) {
                    this.qrBoxCls = 'topLeft'
                }
            },
        },
        mounted() {
            this.calcPopWidth();
            window.addEventListener('resize', this.calcPopWidth)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.calcPopWidth)
        },
        created() {
            this.refreshCode();
            this.loadRsaPub();
            if (this.$route.params.tenantId) {
                this.updateTenantId(this.$route.params.tenantId);
            }else{
                this.updateTenantId('system');
            }
            if (this.$store.getters.hasLogin) { // 判断是否已经刷新
                return window.location.reload()
            }

            // 正式显示页面内容
            this.isReload = true
        }
    }
</script>

<style scoped>
    .login-code-img {
        width: 120px;
        height: 38px;
        background-color: #fdfdfd;
        border: 1px solid #dcdee2
    }

    .captcha-item >>> .ivu-input-group-append {
        padding: 0 !important;
        border: 0 !important;
    }
</style>
